<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%   
String path = request.getContextPath();   
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";   
%> 
<!DOCTYPE html>
<html>
<head>
    <title>用户资料</title>
    <base href="<%=basePath%>"> 
    <link rel="shortcut icon" href="<%=basePath%>img/favo.ico">
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/todc-bootstrap.css" rel="stylesheet">
    <link href="css/global.css" rel="stylesheet">
    <link href="css/layout.css" rel="stylesheet">
    <link href="css/datetimepicker.css" rel="stylesheet">
    <link href="css/user.css" rel="stylesheet">
    <link href="css/bootstrap-fileupload.min.css" rel="stylesheet">
    <link href="css/jquery.Jcrop.min.css" rel="stylesheet">
    <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="js/bootstrap-fileupload.min.js"></script>
    <script type="text/javascript" src="js/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript" src="js/jquery.Jcrop.min.js"></script>
</head>
<style>
	.head-img{
		margin-left:45px;
		margin-top:40px;
	}
	.head-img .left{
		margin-right:15px;
		float:left;
	}
	.head-img .middle{
		width:200px;
		float:left;
		margin-right:15px;
	}
	.head-img .rb{
		margin-top:30px;
	}
	.form-horizontal p,.head-img p{
		color:#666666;
	}
	img{
		max-width:auto;
		max-height:auto;
	}
	.save-btn{
		margin-top:30px;
		padding-left:100px;
	}
</style>

<body>
<jsp:include page="include/topbar.jsp"></jsp:include>
<jsp:include page="include/logobar.jsp"></jsp:include>
<div class="layout grid-s5m0">
	<div class="col-sub">
		<h3>设置</h3>
		<ol class="unstyled">
			<li>
				<a href="user/info.html"><i class="icon-edit"></i>&nbsp;个人资料</a>
			</li>
			<li>
				<a href="user/head.html"><i class="icon-user"></i>&nbsp;修改头像</a>
			</li>
		</ol>
	</div>
	<div class="main-wrap">
		<div id="msgbox" class="box form-horizontal">
			<div class='form-title'>
				修改头像
			</div>
		   
			<div class="head-img">
				<div class="left jcrop-holder">
					<img alt="" id="target" src="${filePath}">
				</div>
				<div class="middle">
					<div style="height:160px;width:160px;overflow:hidden;"  class="img-polaroid">
						<img  id="preview_1"  alt="" src="${filePath}">
					</div>
					<p>大尺寸头像:160x160</p>
				</div>
				<div class="right">
					<div class="rt">
						<div style="height:50px;width:50px;overflow:hidden;" class="img-polaroid">
							<img id="preview_2" alt="" src="${filePath}">
						</div>
						<p>大尺寸头像:50x50</p>
					</div>
					<div class="rb">
						<div style="height:24px;width:24px;overflow:hidden;" class="img-polaroid">
							<img id="preview_3" alt="" src="${filePath}">
						</div>
						<p>大尺寸头像:24x24</p>
					</div>
				</div>
			</div>	
		</div>
		<div class="save-btn">
			<form action="user/cuthead.html" method="post" onsubmit="return initParam()">
				<input id="x1" name="x1" type="hidden"><input id="y1" name="y1" type="hidden">
				<input id="x2" name="x2" type="hidden"><input id="y1" name="y2" type="hidden">
				<input id="w" name="w" type="hidden"><input id="h" name="h" type="hidden">
				<input type="hidden" name="filePath" value="${filePath }">
				<input type="submit" onclick="initParam()" value="保存" class="btn btn-success">
			</form>
		</div>
	</div>
</div>
<script>
var realW = ${width};
var realH = ${height};

var scale = 220/realH;
var nowW = realW*scale;
var nowH = 220;
var minSelect = 40/scale;

var jcrop_api,boundx,boundy;

$(document).ready(function(){
	// Create variables (in this scope) to hold the API and image size
	$("#target").Jcrop({
		onChange:updatePreview,
		onSelect:updatePreview,
		boxHeight:220,
		aspectRatio:1,
		sideHandles:false,

		allowResize:true
	},function(){
		// Use the API to get the real image size
		var bounds=this.getBounds();
		boundx=bounds[0];
		boundy=bounds[1];
		// Store the API in the jcrop_api variable
		jcrop_api=this;
		jcrop_api.setSelect([0,0,minSelect+1,minSelect+1]);
		var sh_1 = realH*160/minSelect;
		var sw_1 = realW*160/minSelect;
		$("#preview_1").css({
			width:(sw_1)+"px",
			height:(sh_1)+"px",
			marginLeft:"-"+0+"px",
			marginTop:"-"+0+"px",
			maxWidth:Math.round(sw_1)+"px",
			maxHeight:Math.round(sh_1)+"px"
		});
		
		var sh_2 = realH*50/minSelect;
		var sw_2 = realW*50/minSelect;
		$("#preview_2").css({
			width:(sw_2)+"px",
			height:(sh_2)+"px",
			marginLeft:"-"+0+"px",
			marginTop:"-"+0+"px",
			maxWidth:Math.round(sw_2)+"px",
			maxHeight:Math.round(sh_2)+"px"
		});
		
		var sh_3 = realH*24/minSelect;
		var sw_3 = realW*24/minSelect;
		$("#preview_3").css({
			width:(sw_3)+"px",
			height:(sh_3)+"px",
			marginLeft:"-"+0+"px",
			marginTop:"-"+0+"px",
			maxWidth:Math.round(sw_3)+"px",
			maxHeight:Math.round(sh_3)+"px"
		});
		
	});
});

function initParam(){

	var param = jcrop_api.tellSelect();
	$("#x1").val(Math.round(param.x));
	$("#y1").val(Math.round(param.y));
	$("#x2").val(Math.round(param.x2));
	$("#y2").val(Math.round(param.y2));
	$("#w").val(Math.round(param.w));
	$("#h").val(Math.round(param.h));
	return true;
}

function updatePreview(c){
	if(parseInt(c.w)>0){		
		var sh_1 = realH*160/c.h;
		var sw_1 = realW*160/c.w;
		var left_1 = c.x*sh_1/realH;
		var top_1 = c.y*sw_1/realW;
		
		var sh_2 = realH*50/c.h;
		var sw_2 = realW*50/c.w;
		var left_2 = c.x*sh_2/realH;
		var top_2 = c.y*sw_2/realW;
		
		var sh_3 = realH*24/c.h;
		var sw_3 = realW*24/c.w;
		var left_3 = c.x*sh_3/realH;
		var top_3 = c.y*sw_3/realW;

		$("#preview_1").css({
			width:Math.round(sw_1)+"px",
			height:Math.round(sh_1)+"px",
			marginLeft:"-"+Math.round(left_1)+"px",
			marginTop:"-"+Math.round(top_1)+"px",
			maxWidth:Math.round(sw_1)+"px",
			maxHeight:Math.round(sh_1)+"px"
		});
		
		$("#preview_2").css({
			width:Math.round(sw_2)+"px",
			height:Math.round(sh_2)+"px",
			marginLeft:"-"+Math.round(left_2)+"px",
			marginTop:"-"+Math.round(top_2)+"px",
			maxWidth:Math.round(sw_2)+"px",
			maxHeight:Math.round(sh_2)+"px"
		});
		
		$("#preview_3").css({
			width:Math.round(sw_3)+"px",
			height:Math.round(sh_3)+"px",
			marginLeft:"-"+Math.round(left_3)+"px",
			marginTop:"-"+Math.round(top_3)+"px",
			maxWidth:Math.round(sw_3)+"px",
			maxHeight:Math.round(sh_3)+"px"
		});
		
	}
}
</script>
<jsp:include page="include/foot.jsp"></jsp:include>
</body>
</html>